{%- stylesheet -%}
@media screen and (min-width: 1300px) {
  .block_order_dashboard .content {
    display: flex;
    align-items: center;
    gap: 32px;
  }
}
.block_order_dashboard .content .mobile_nav {
  display: none;
}
@media screen and (max-width: 1299px) {
  .block_order_dashboard .content .pc-prev, .block_order_dashboard .content .pc-next {
    display: none;
  }
  .block_order_dashboard .content .mobile_nav {
    display: flex;
    margin-top: 16px;
    justify-content: center;
    gap: 24px;
  }
}
.block_order_dashboard .swiper {
  overflow: hidden;
  flex: 1;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.block_order_dashboard .swiper .swiper-slide {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 999px) {
  .block_order_dashboard .swiper .swiper-slide {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
  }
}
.block_order_dashboard .swiper .slide-box {
  display: flex;
  border-radius: 10px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
}
.block_order_dashboard .swiper .slide-box .left {
  padding: 16px;
  display: flex;
  align-items: center;
  flex: 1;
}
@media screen and (max-width: 767px) {
  .block_order_dashboard .swiper .slide-box .left {
    padding: 8px;
  }
}
.block_order_dashboard .swiper .slide-box .left .img_box {
  width: 106px;
  height: 106px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f9f9f9;
  flex-shrink: 0;
}
.block_order_dashboard .swiper .slide-box .left .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style2, .block_order_dashboard .swiper .slide-box .left .img_box .img_style3, .block_order_dashboard .swiper .slide-box .left .img_box .img_style4 {
  width: 100%;
  height: 100%;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style2 img, .block_order_dashboard .swiper .slide-box .left .img_box .img_style3 img, .block_order_dashboard .swiper .slide-box .left .img_box .img_style4 img {
  height: 53px;
  width: 53px;
  border-radius: 5px;
  object-fit: cover;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style2 > div:nth-child(1) {
  display: flex;
  justify-content: flex-start;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style2 > div:nth-child(2) {
  display: flex;
  justify-content: flex-end;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style3 > div:nth-child(1) {
  display: flex;
  justify-content: center;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style3 > div:nth-child(2) {
  display: flex;
}
.block_order_dashboard .swiper .slide-box .left .img_box .img_style4 {
  display: flex;
  flex-wrap: wrap;
}
.block_order_dashboard .swiper .slide-box .left .text_box {
  box-sizing: border-box;
  padding: 0px 0px 0px 12px;
  display: flex;
  flex-direction: column;
}
.block_order_dashboard .swiper .slide-box .left .text_box .item_title {
  font-size: 22px;
  font-weight: bold;
  line-height: 29px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block_order_dashboard .swiper .slide-box .left .text_box .item_title .label {
  font-size: 12px;
  background-color: #24AB52;
  color: #ffffff;
  height: 19px;
  line-height: 1;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  text-transform: capitalize;
}
.block_order_dashboard .swiper .slide-box .left .text_box .info {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block_order_dashboard .swiper .slide-box .left .text_box .order_info {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #999999;
}
.block_order_dashboard .swiper .slide-box .left .text_box .order_info .order_content {
  flex: 1;
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.block_order_dashboard .swiper .slide-box .left .text_box .mobile_right {
  display: none;
}
.block_order_dashboard .swiper .slide-box .left .text_box span {
  display: inline-flex;
}
.block_order_dashboard .swiper .slide-box .left .text_box .flag {
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.block_order_dashboard .swiper .slide-box .left .text_box .flag img {
  width: 20px;
  object-fit: cover;
}
@media screen and (max-width: 999px) {
  .block_order_dashboard .swiper .slide-box .left .text_box {
    padding: 0px 0px 0px 8px;
  }
  .block_order_dashboard .swiper .slide-box .left .text_box .item_title {
    font-size: 18px;
  }
  .block_order_dashboard .swiper .slide-box .left .text_box .mobile_right {
    display: block;
  }
  .block_order_dashboard .swiper .slide-box .left .text_box .mobile_right a {
    display: flex;
    justify-content: space-between;
  }
  .block_order_dashboard .swiper .slide-box .left .text_box .mobile_right a .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--btn-color);
  }
}
.block_order_dashboard .swiper .slide-box .right {
  width: 140px;
  background-color: #F7F7F7;
}
@media screen and (max-width: 999px) {
  .block_order_dashboard .swiper .slide-box .right {
    display: none;
  }
}
.block_order_dashboard .swiper .slide-box .right .item_price {
  font-size: 20px;
}
.block_order_dashboard .swiper .slide-box .right .total_price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  width: 100%;
}
.block_order_dashboard .swiper .slide-box .right .total_price > div:nth-child(1) {
  color: #999999;
  font-size: 14px;
}
.block_order_dashboard .swiper .slide-box .right .total_price .price {
  font-size: 20px;
}
.block_order_dashboard .swiper .slide-box .right a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  height: 100%;
}
.block_order_dashboard .swiper .slide-box .right .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.block_order_dashboard .swiper .slide-box .right .btn span {
  text-decoration: underline;
  color: var(--btn-color);
}
.block_order_dashboard .btn_prev svg {
  transform: rotate(180deg);
}
.block_order_dashboard .swiper-nav-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 3px 15px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
{%- endstylesheet -%}

{% assign data = section.settings %}
{% capture container %}
    {%- if data.is_fill -%}
        full_container_wrapper
    {%- else -%}
        container_wrapper
    {%- endif -%}
{% endcapture %}
{% assign blockId = block_id | default: section.block_id %}
{% get_deliver_order limit={data.order_number} start_day={data.order_day} %}
{% if deliver_order.size != 0 %}
<div class="block_order_dashboard" id="block_order_dashboard-{{ blockId }}">
  <div class="{{ container }}">
    {% include 'block_title', title: data.block_title, detail: data.block_detail %}
    <div class="content" style="--btn-color: {{ data.btn_color }};">
      <div class="pc-prev swiper-nav-btn btn_prev">
        <svg
          t="1739592527845"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7812"
          width="20"
          height="20"
        >
          <path d="M456.832 257.834667a42.666667 42.666667 0 1 0-60.330667 60.330666L590.293333 512l-193.792 193.834667a42.666667 42.666667 0 0 0-3.541333 56.32l3.541333 4.010666a42.666667 42.666667 0 0 0 60.330667 0l224-224a42.666667 42.666667 0 0 0 0-60.330666l-224-224z" fill="#1D1F21" p-id="7813"></path>
        </svg>
      </div>
      <div class="swiper">
        <ul class="swiper-wrapper">
          {% if deliver_order.size == 0 %}
            {% for o in (1..3) %}
              <li class="swiper-slide">
                {% for i in (1..4) %}
                  <div class="slide-box">
                    <div class="left">
                      <div class="img_box">
                        {% include 'lazy_img' %}
                      </div>
                      <div class="text_box">
                        <div class="item_title">
                          #F********0
                          <span class="label">{{ lang.customer.order_fulfillment_status_shipped }}</span>
                        </div>
                        <div class="info">
                          <span class="flag">
                            {% include 'lazy_img' %}
                          </span>
                          <span class="name">Da**d</span>
                        </div>
                        <div class="order_info">
                          <span class="order_icon"> </span>
                          <span class="order_content">YANWEN: FT2********230</span>
                        </div>
                        <div class="mobile_right">
                          <a href="javascript:;">
                            <div class="item_price">$ 90.00</div>

                            <div class="btn">
                              <svg
                                t="1739589818494"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="7667"
                                height="18"
                              >
                                <path d="M662.656 233.344l256 256 0.704 0.832a32.192 32.192 0 0 1 2.112 2.496l-2.816-3.328A32.128 32.128 0 0 1 928 512v0.768c0 1.28-0.128 2.624-0.32 3.968L928 512a32.128 32.128 0 0 1-9.344 22.656l-256 256a32 32 0 1 1-45.312-45.312L818.752 544H128a32 32 0 0 1 0-64h690.752L617.344 278.656a32 32 0 0 1-3.648-40.832l3.648-4.48a32 32 0 0 1 45.312 0z" fill="{{ data.btn_color }}" p-id="7668"></path>
                              </svg>
                              <span>{{ data.btn }}</span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="right">
                      <a href="javascript:;">
                        <div class="item_price">$ 90.00</div>

                        <div class="btn">
                          <svg
                            t="1739589818494"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="7667"
                            height="18"
                          >
                            <path d="M662.656 233.344l256 256 0.704 0.832a32.192 32.192 0 0 1 2.112 2.496l-2.816-3.328A32.128 32.128 0 0 1 928 512v0.768c0 1.28-0.128 2.624-0.32 3.968L928 512a32.128 32.128 0 0 1-9.344 22.656l-256 256a32 32 0 1 1-45.312-45.312L818.752 544H128a32 32 0 0 1 0-64h690.752L617.344 278.656a32 32 0 0 1-3.648-40.832l3.648-4.48a32 32 0 0 1 45.312 0z" fill="{{ data.btn_color }}" p-id="7668"></path>
                          </svg>
                          <span>{{ data.btn }}</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
      <div class="pc-next swiper-nav-btn">
        <svg
          t="1739592527845"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7812"
          width="20"
          height="20"
        >
          <path d="M456.832 257.834667a42.666667 42.666667 0 1 0-60.330667 60.330666L590.293333 512l-193.792 193.834667a42.666667 42.666667 0 0 0-3.541333 56.32l3.541333 4.010666a42.666667 42.666667 0 0 0 60.330667 0l224-224a42.666667 42.666667 0 0 0 0-60.330666l-224-224z" fill="#1D1F21" p-id="7813"></path>
        </svg>
      </div>
      <div class="mobile_nav">
        <div class="mobile_prev swiper-nav-btn btn_prev">
          <svg
            t="1739592527845"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7812"
            width="20"
            height="20"
          >
            <path d="M456.832 257.834667a42.666667 42.666667 0 1 0-60.330667 60.330666L590.293333 512l-193.792 193.834667a42.666667 42.666667 0 0 0-3.541333 56.32l3.541333 4.010666a42.666667 42.666667 0 0 0 60.330667 0l224-224a42.666667 42.666667 0 0 0 0-60.330666l-224-224z" fill="#1D1F21" p-id="7813"></path>
          </svg>
        </div>
        <div class="mobile_next swiper-nav-btn">
          <svg
            t="1739592527845"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7812"
            width="20"
            height="20"
          >
            <path d="M456.832 257.834667a42.666667 42.666667 0 1 0-60.330667 60.330666L590.293333 512l-193.792 193.834667a42.666667 42.666667 0 0 0-3.541333 56.32l3.541333 4.010666a42.666667 42.666667 0 0 0 60.330667 0l224-224a42.666667 42.666667 0 0 0 0-60.330666l-224-224z" fill="#1D1F21" p-id="7813"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    $(function() {
        let data = {{ deliver_order | pubic_front_imgcdn_replace | json }};
        let isMobile = $(window).width() >=1000 ? false : true;
        if(isMobile) {
            data = chunkArray(data,3)
        }else {
            data = chunkArray(data,4)
        }

        if(data.length <= 1) {
            $('#block_order_dashboard-{{ blockId }} .swiper-nav-btn').hide()
        }
       
        
        function chunkArray(arr, size) {
            return arr.reduce((result, item, index) => {
                if (index % size === 0) {
                    result.push([]);
                }
                result[result.length - 1].push(item);
                return result;
            }, []);
        }

        
        function renderSlide(data) {
            let html = '';
            data.forEach(item => {
                let template = `
                    <li class="swiper-slide">
                        ${item.map(i => {
                            return `
                                <div class="slide-box">
                                <div class="left">
                                    <div class="img_box">
                                        ${renderImg(i.products)}
                                    </div>
                                    <div class="text_box">
                                        <div class="item_title">
                                            ${i.order_number}
                                            <span class="label">{{ lang.customer.order_fulfillment_status_shipped }}</span>
                                        </div>
                                        <div class="info">
                                            <span class="flag">
                                                ${i.shipping_address ? `<img data-sizes="auto" data-src="/statics/currency/${filterFlag(i.shipping_address.country_code)}.png" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>`: ''}
                                            </span>
                                            <span class="name">${i.customer_name}</span>
                                        </div>
                                        <div class="order_info">
                                            <span class="order_icon">
                                                {% if data.logistics_icon == 'type1' %}
                                                <svg t="1739605712551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7546" width="24" height="24"><path d="M487.466667 554.581333l-0.085334 1.706667V896L170.666667 704.512V363.093333l316.8 191.530667zM853.333333 364.16v340.352L536.618667 896v-341.589333L853.333333 362.837333v1.322667zM330.581333 237.696c1.664 1.834667 3.498667 3.413333 5.546667 4.650667l308.906667 186.794666-133.248 80.597334-315.605334-190.805334 134.4-81.237333zM512 128l315.562667 190.805333-133.205334 80.512-315.52-190.762666L512 128z" fill="#999999" p-id="7547"></path></svg>
                                                {% elsif data.logistics_icon == 'type2' %}
                                                 <svg t="1739606078657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7691" width="24" height="24"><path d="M845.610667 711.125333a123.306667 123.306667 0 0 0-75.008-91.434666 116.522667 116.522667 0 0 0-114.602667 16.768V367.530667c0-17.152 8.533333-33.109333 22.528-42.24a46.506667 46.506667 0 0 1 46.464-2.56l144 72.533333c16.512 8.32 27.008 25.728 27.008 44.8V661.333333c0 27.477333-21.504 49.792-48 49.792h-2.389333z m-408.021334 0c-11.434667-57.941333-60.586667-99.498667-117.589333-99.498666-57.002667 0-106.154667 41.557333-117.589333 99.498666h-26.410667C149.504 711.125333 128 688.810667 128 661.333333V263.125333C128 235.605333 149.504 213.333333 176 213.333333h384c26.496 0 48 22.272 48 49.792V661.333333c0 27.477333-21.504 49.792-48 49.792h-122.410667zM320 810.666667c39.765333 0 71.978667-33.450667 71.978667-74.666667S359.765333 661.333333 320 661.333333s-72.021333 33.450667-72.021333 74.666667S280.234667 810.666667 320 810.666667z m407.978667 0c39.765333 0 72.021333-33.450667 72.021333-74.666667s-32.256-74.666667-72.021333-74.666667c-39.722667 0-71.978667 33.450667-71.978667 74.666667S688.256 810.666667 727.978667 810.666667z" fill="#999999" p-id="7692"></path></svg>
                                                {% elsif data.logistics_icon == 'type3' %}
                                                 <svg t="1739606133068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7870" width="24" height="24"><path d="M564.864 561.92l308.309333-308.352s51.370667-51.370667 0-102.741333-102.741333 0-102.741333 0l-179.882667 179.882666-385.450666-77.141333-51.370667 51.370667 308.309333 154.154666-143.914666 143.957334-138.752-15.402667L128 639.018667l179.882667 77.141333L384.981333 896l51.328-51.370667-15.36-138.794666 143.914667-143.914667z" fill="#999999" p-id="7871"></path><path d="M803.84 826.368l-82.773333-374.613333-130.56 131.925333 155.946666 297.514667z" fill="#999999" p-id="7872"></path></svg>
                                                {% else %}
                                                 <svg t="1739606168579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8016" width="24" height="24"><path d="M44.245333 662.144l72.96 175.104a27.136 27.136 0 0 0 25.045334 16.085333h667.221333a40.32 40.32 0 0 0 29.184-14.08l139.648-179.114666c6.272-8.064 2.133333-14.08-6.229333-14.08H54.698667c-10.453333 0-14.592 8.021333-10.453334 16.085333z m765.226667 120.746667c-18.773333 0-33.365333-14.08-33.365333-34.218667 0-20.138667 14.592-32.213333 33.365333-32.213333s33.365333 14.08 33.365333 32.213333c-2.133333 20.138667-14.592 34.218667-33.365333 34.218667zM776.106667 233.472a18.346667 18.346667 0 0 0-18.773334-18.133333h-50.005333a18.346667 18.346667 0 0 0-18.773333 18.133333v194.816a18.346667 18.346667 0 0 0 18.773333 18.090667h52.096a18.346667 18.346667 0 0 0 18.773333-18.090667V233.472h-2.090666z m-152.192 0c0-10.069333-8.32-20.138667-16.64-20.138667H555.093333a18.346667 18.346667 0 0 0-18.773333 18.133334V426.24a18.346667 18.346667 0 0 0 18.773333 18.090667h52.138667a18.346667 18.346667 0 0 0 18.773333-18.090667l-2.133333-192.853333z m216.832 237.056h-309.632a18.346667 18.346667 0 0 1-18.773334-18.090667v-20.138666a18.346667 18.346667 0 0 0-18.773333-18.090667H122.496a18.346667 18.346667 0 0 0-18.773333 18.090667v161.408a18.346667 18.346667 0 0 0 18.773333 18.133333h699.477333a18.346667 18.346667 0 0 0 18.773334-18.133333v-123.178667z m-651.52 52.352c-18.773333 0-33.365333-14.08-33.365334-34.218667 0-20.138667 14.592-32.213333 33.365334-32.213333s33.322667 14.08 33.322666 32.213333c0 18.090667-14.592 34.218667-33.322666 34.218667z m120.917333 2.005333c-18.773333 0-33.365333-14.08-33.365333-32.213333 0-18.090667 14.592-34.218667 33.365333-34.218667s33.322667 14.08 33.322667 34.218667c0 20.138667-16.64 32.213333-33.322667 32.213333z m112.554667 0c-18.773333 0-33.365333-14.08-33.365334-32.213333 0-18.090667 14.592-32.213333 33.365334-32.213333s33.365333 14.08 33.365333 32.213333-14.592 32.213333-33.365333 32.213333z" fill="#999999" p-id="8017"></path></svg>
                                                {% endif %}
                                            </span>
                                            <span class="order_content">${i.fulfillments[0].tracking_company}: ${i.fulfillments[0].tracking_number}</span>
                                        </div>
                                        <div class="mobile_right">
                                            {% comment %} {% if storeConfig.track_order_config == 1 %}
                                            <a href="/account/trackingorder?order_number=${i.order_number}" target="_blank">
                                                <div class="item_price">${formatMoney(i.total_price / i.currency_rate, oemcart_currency)}</div>
                                                
                                                <div class="btn">
                                                    <svg t="1739589818494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7667" height="18"><path d="M662.656 233.344l256 256 0.704 0.832a32.192 32.192 0 0 1 2.112 2.496l-2.816-3.328A32.128 32.128 0 0 1 928 512v0.768c0 1.28-0.128 2.624-0.32 3.968L928 512a32.128 32.128 0 0 1-9.344 22.656l-256 256a32 32 0 1 1-45.312-45.312L818.752 544H128a32 32 0 0 1 0-64h690.752L617.344 278.656a32 32 0 0 1-3.648-40.832l3.648-4.48a32 32 0 0 1 45.312 0z" fill="{{ data.btn_color }}" p-id="7668"></path></svg>
                                                <span class="btnLink" order-namber="${i.order_number}">{{ data.btn }}</span>
                                                </div>
                                            </a>
                                            {% else %}
                                             
                                            {% endif %} {% endcomment %}
                                             <div class="price">${formatMoney(i.total_price / i.currency_rate, oemcart_currency)}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    {% comment %} {% if storeConfig.track_order_config == 1 %}
                                    <a href="/account/trackingorder?order_number=${i.order_number}" target="_blank">
                                        <div class="item_price">${formatMoney(i.total_price / i.currency_rate, oemcart_currency)}</div>
                                        
                                        <div class="btn">
                                            <svg t="1739589818494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7667" height="18"><path d="M662.656 233.344l256 256 0.704 0.832a32.192 32.192 0 0 1 2.112 2.496l-2.816-3.328A32.128 32.128 0 0 1 928 512v0.768c0 1.28-0.128 2.624-0.32 3.968L928 512a32.128 32.128 0 0 1-9.344 22.656l-256 256a32 32 0 1 1-45.312-45.312L818.752 544H128a32 32 0 0 1 0-64h690.752L617.344 278.656a32 32 0 0 1-3.648-40.832l3.648-4.48a32 32 0 0 1 45.312 0z" fill="{{ data.btn_color }}" p-id="7668"></path></svg>
                                        <span class="btnLink" order-namber="${i.order_number}">{{ data.btn }}</span>
                                        </div>
                                    </a>
                                    {% else %}
                                   
                                    {% endif %} {% endcomment %}
                                      <div class="total_price">
                                        <div>{{ lang.checkout.total_price }}</div>
                                        <div class="price">${formatMoney(i.total_price / i.currency_rate, oemcart_currency)}</div>
                                    </div>
                                </div>
                            </div>
                            
                            `
                        }).join('')}
                           
                        </li>
                `
                html += template;
            })
            $('#block_order_dashboard-{{ blockId }} .swiper-wrapper').html(html);
        }

        
        function filterFlag(code) {
          for(let i in oemcart_countrys) {
            if(oemcart_countrys[i].country_code_2 == code) {
              return oemcart_countrys[i].default_currency.toLocaleLowerCase();
            }
          }
        }


        
        function renderImg(data) {
                if(data.length == 1) {
                    return `
                        <img data-sizes="auto" data-src="${data[0].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                    `
                }
                if(data.length <= 2) {
                        return `
                            <div class="img_style2">
                                <div>
                                    <img data-sizes="auto" data-src="${data[0].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                                </div>
                                <div>
                                    <img data-sizes="auto" data-src="${data[1].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                                </div>
                            </div>
                        `
                }
                if(data.length <= 3) {
                        return `
                            <div class="img_style3">
                                <div>
                                    <img data-sizes="auto" data-src="${data[0].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                                </div>
                                <div>
                                    <img data-sizes="auto" data-src="${data[1].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                                    <img data-sizes="auto" data-src="${data[2].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                                </div>
                            </div>
                        `
                }
                return `
                    <div class="img_style4">
                        <img data-sizes="auto" data-src="${data[0].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                        <img data-sizes="auto" data-src="${data[1].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                        <img data-sizes="auto" data-src="${data[2].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                        <img data-sizes="auto" data-src="${data[3].src}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"/>
                    </div>
                `
        }
        renderSlide(data);


        let options = {
            slidesPerView: 1,
            spaceBetween: 20,
            loop: true,
            autoHeight: true
        }
        if($(window).width() >= 1300) {
            options.navigation = {
                nextEl: '#block_order_dashboard-{{ blockId }} .pc-next',
                prevEl: '#block_order_dashboard-{{ blockId }} .pc-prev',
            }
        }else {
            options.navigation = {
                nextEl: '#block_order_dashboard-{{ blockId }} .mobile_next',
                prevEl: '#block_order_dashboard-{{ blockId }} .mobile_prev',
            }
        }
        const swiper = new Swiper('#block_order_dashboard-{{ blockId }} .swiper', {
            ...options
        })
    })
</script>
{% endif %}
{% schema %}
{
  "class": "block_order_dashboard",
  "is_global": false,
  "icon": "icon-Dingdan_view",
  "name": {
    "zh_CN": "订单履约看板",
    "en_US": "Order Fulfilment Dashboard"
  },
  "max_blocks": "",
  "blocks": [],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "已发货订单抓取范围 (天)",
        "en_US": "Captured range of shipped orders (days)"
      },
      "info": {
        "zh_CN": "本积木将自动抓取【x天内】已发货的真实订单，增强客户对平台履约能力的信任。若对应时间内无订单，则本积木将隐藏",
        "en_US": "This block will automatically capture the real orders that have been shipped within [x days], enhancing customers' trust in the platform's ability to fulfill the contract. If there is no order within the corresponding time, the block will be hidden"
      },
      "default": 7,
      "max": 90,
	    "min": 1,
      "id": "order_day"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "Real-Time Tracking",
      "id": "block_title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short Description"
      },
      "id": "block_detail",
      "default": "<p>Track our real-time shipped orders and experience our reliable fulfillment process yourself. 🚚</p><p><span style=\"color: #a0a0a0; font-size: 12px;\"><em>Note: Sensitive details masked to protect privacy.</em></span></p>"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "订单数量",
        "en_US": "Order Number"
      },
      "id": "order_number",
      "max": 40,
      "min": 8,
      "step": 4,
      "unit": "",
      "default": 24
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "物流图标",
        "en_US": "Logistics Icon"
      },
      "default": "type1",
      "id": "logistics_icon",
      "option": [
        {
          "label": {
            "zh_CN": "包裹",
            "en_US": "Package"
          },
          "icon": "shopyyicon-Package",
          "value": "type1"
        },
        {
          "label": {
            "zh_CN": "货车",
            "en_US": "Truck"
          },
          "icon": "shopyyicon-Truck",
          "value": "type2"
        },
        {
          "label": {
            "zh_CN": "飞机",
            "en_US": "Aeroplane"
          },
          "icon": "shopyyicon-Airplane",
          "value": "type3"
        },
        {
          "label": {
            "zh_CN": "船舶",
            "en_US": "Boats"
          },
          "icon": "shopyyicon-Maritime",
          "value": "type4"
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "block_title": "Real-Time Tracking",
      "block_detail": "<p>Track our real-time shipped orders and experience our reliable fulfillment process yourself. 🚚</p><p><span style=\"color: #a0a0a0; font-size: 12px;\"><em>Note: Sensitive details masked to protect privacy.</em></span></p>",
      "order_number": 24,
      "order_day":7,
      "logistics_icon": "type1"
    },
    "blocks": []
  }
}
{% endschema %}
